디파이 파밍 메뉴와 화면 살펴보기

메뉴명

• 메뉴명은 메뉴가 포함하는 콘텐츠와 기능을 포괄할수 있어야한다.
• 어떤 용어를 메뉴명으로 사용할지는 구조를 어떻게 설계 하느냐에 따라 다르게 선택할 수 있다.
예를들어 Trader Joe의 Farm과 Pool은 별도의 메뉴로 분리되어있지만 Panckae Swap은 Trade메뉴의 하위 메뉴로 Exchange와 Liquidity가 있고, Earn메뉴의 하위 메뉴로 Farms와 Pools이 있다.
• 개인적으로는 단순 명료한것이 좋아서 주요 기능은 하위메뉴에 넣지않는게 좋다고 생각한다.

• 메뉴 이름은 어떤 주제에 대한것인지 명확한 의미를 전달해야한다.
한 가지로 정의할 수 없고 여러의미로 사용되는 용어는 메뉴명으로 적절하지 않다. 예를들어 Stake는 'Farming을 위해서 Staking한다', 'Farming을 통해 얻은 토큰을 Staking한다' 처럼 디파이 내에서도 여러가지 의미로 사용되기 때문에 다른 대체용어를 사용하는것이 더 좋을 것 같다.

메뉴 구조

절차 개선하기

• 서비스 이용 도중 막힘이 없도록 매끄럽게 이어지는 flow를 만든다.
• 같은 기능도 프로덕트 마다 이용 흐름에 차이가 있을수 있지만, 사용자를 헷갈리지 않게한다.

• 최대한 적은 인터랙션으로 거래 가능하도록 설계한다.
• 먼저 다른 사이트에서 토큰을 swap해야하는 경우, 해당 토큰 swap을 제공하는 사이트로 안내한다. (새탭, 새창으로 열기)
• 현재 상태나 다음 과정에 대한 안내 메시지를 띄워주면 사용자가 느끼는 복잡함을 줄일 수 있다.
• "거래 승인을 기다리는중.."
• 다음 단계로 진행하기위해 클릭.

• 편의에 도움이 되는 기능을 추가합니다.
• 아래 기타 기능 항목 확인

• 사용하는 순서대로 메뉴를 구성한다.
• 일드 파밍을 제공하는 프로덕트에서는 [토큰 스왑]→[토큰 페어 생성(유동성 제공)]→[예치]→[재예치] 등이 일반적인 순서이다. 따라서 메뉴도 그 순서에 맞게 Swap(Trade)/Liquidity(Pool, Deposit)/Farm/Stake 가 일반적이고 어떤 기능을 제공하느냐에 따라 Vault나 Zap, Governance, Bridge, Chart 등의 메뉴를 추가할 수 있다.
• 렌딩을 제공하는 프로덕트에서는 [스테이킹]→[렌딩] 이 일반적인 순서이다. 따라서 메뉴도 그 순서에 맞게 Deposit/Lend 순인 경우가 많다.
예를들어 Trader Joe의 Lend메뉴클릭시 Deposit과 Borrow 목록이 한 화면에 있고, SushiSwap은 Lending메뉴의 하위 메뉴로 Lend와 Borrow를 선택할 수 있다.
 

화면 구성

• 메뉴를 설명하는 메시지를 넣는다.
보통은 짧고 간결한 한 문장의 메시지를 사용하지만, 긴 설명이 필요한 메뉴도 있다.

• 직관적으로 다른 메뉴임을 구별할 수 있도록 해야한다.
특히 Pool과 Farm, Lend는 동일하게 리스트로 나열하기보다 메뉴 구분이 쉽도록 표현과 구성에 차이를 두는게 좋다.



• 색상 차이를 두거나 배열 구성이 같지 않도록 하기
• 직관적인 이미지
Zap메뉴: Z와 닯은 번개모양 이미지를 사용하는 경우가 종종 있음.
보상: 토큰1+토큰2, 토큰 이미지
Pool: 풀장 이미지(Trader Joe)

상세 정보 제공

• 어떤 정보를 제공할 것인지 결정한다.
• 일드파밍은 풀 별로 이자 수익에 대한 자세한 설명이 필요하며, 기본적으로 TVL과 수익률(APY or APR)을 표기한다.
• 정확한 이해를 돕기 위해 보상 구성(native token or LP)과 하루(daily) 기준의 수익률을 함께 표기하기도하고, 옵션으로 선택 할수도 있다.
• 경우에따라 잠금(lock up)기간, 출금(unstake)기간, 부스트 효과 등에 따라 설명이 필요하기도 하다.

• 정보를 어떻게 나타낼 것인지를 결정한다.
• 제공해야하는 정보의 양이 많고 풀 별로 비교가 쉬워야하기 때문에, 아래와 같이 목록화하여 정보를 나열한다.



• 다른 방식과의 비교
DeFi는 포크가 가능하기때문에 프론트엔드, UI를 다른 프로젝트에서 재사용하는 경우가 많다. 아래와 같은 Pancake변형 Goose기반 템플릿이 대표적인데, 포크가 잦다는 것과는 별개로, 구체적인 파밍 수익률 계산에 도움이 된다는점과 해당 컨트랙트를 확인할수 있는 링크를 함께 제공하고있어서 좀 더 신뢰가 간다는 생각을 했었다. (프로젝트마다 조금씩 다름)
하지만 단점은 일렬로 목록화 한 것에 비해 풀별 수익률을 한눈에 비교하기 어렵다.



 
• 보상을 어떤 토큰으로 받는지 알기 쉽게 나타낸다.
• 모바일 화면에서 가로로 긴 컴포넌트를 이용할수 없는경우 드래그를 통해 모든 정보를 확인할 수 있도록 하는것이 좋다.

• 편의를 위한 기능
• 검색기능을 제공해야한다.
• 수많은 유동성 풀이 있기때문에 스크롤만 내려서는 원하는 풀을 찾기가 어렵다.
• 토큰명으로 검색
• 필터를 제공한다.
• 토큰 종류별: 네이티브토큰/스테이블 등
• 풀의 활성화 유무: Active/Inactive
• 클릭한 속성(Column)을 기준으로 오름차순, 내림차순 정렬
• 속성명 옆의 화살표 표시 등으로, 클릭하여 정렬이 가능한것을 알 수 있도록 한다.

• 가능한 보편적인 용어를 사용하는것이 좋다. (예: 단순 예치는 Stake보다 Deposit)
기존 디파이 프로토콜과 다른 특수한 개념이 있는 경우에는 앱에서 문서 링크를 제공하거나 간단한 설명을 통해 개념을 상기할수 있도록 해야한다.

• 클릭이나 마우스오버시 용어에 대한 설명을 볼수있는 버튼을 제공한다.





swap을 이용할때 위와 같이 낯선 용어들을 한번에 접하게 된다. 반드시 알아야하는 정보이지만 용어 설명을 위해 페이지가 글자로 가득차게되면 보기에도 좋지 않고, 처음 사용하는 입장에서 이런것들을 한번에 받아들이기 부담스럽다. 그래서 설정에서 옵셔널하게 변경할수 있게 하고 ℹ️나 ❓ 를 통해 용어에 대한 설명을 숨겨놓은 것이라는 생각이든다.

기타 기능

• 스왑



스왑을 직접 제공하지 않아도 스왑메뉴를 만들고, 네이티브 토큰의 유동성이 높은 사이트와 스왑 메뉴를 연결한다. 스왑 → 유동성공급 등의 절차대로 이용할수 있도록 하기위함이다.

• 차트
• Chart 메뉴로 분리하거나 Swap 메뉴에서 제공한다.







• 별도의 메뉴로 분리하는 경우에는 Analytics메뉴로 대체할수 있다.
하지만 애널리틱스는 별도 사이트로 만들어 지는 경우가 많다.
애널리틱스 메뉴는 본 서비스 메뉴에 대응되는 메뉴(토큰, 풀, 파밍, 스테이크, 렌딩)로 구성되므로 페이지를 따로 만들기보다는 해당하는 메뉴에서 토글로 애널리틱스 모드 전환이 가능하게 하면 어떨까한다.



• 차트를 볼수 있는 타 사이트로 연결하기도 한다.
• https://dexscreener.com/
• https://nomics.com/assets/btc-bitcoin

• Zap
Zap메뉴를 따로 분리한다. 유동성 제공과 파밍시 복잡한 절차를 줄여주는 기능이므로 Swap 혹은 Liquidity 메뉴에서 안내하기도 한다.

• 브릿지
• 스왑과 마찬가지로 직접 제공하는 서비스가 아니어도 메뉴 클릭시 브릿지 사이트로 이동하게 한다.
• 브릿지 메뉴는 전체 메뉴의 가장 앞 혹은 가장 뒤에 배치한다.
• 어떤 브릿지를 연결할지도 생각해야한다.
• 여러 체인을 지원하는 브릿지가 있다면 결정이 쉽지만 그렇지 않은경우 네트워크에 따라 다양한 브릿지 링크를 제공한다.
• 대게 다른 체인에서 옮겨오는 브릿지만을 제공하지만 반대로 다른 체인으로 보내주는 기능까지 지원하는 경우도 있다.

• Liquidity Lock
컨트랙트에 Lock된 토큰 수량을 알 수 있는 사이트로 연결하기도 한다.
유동성이 계속해서 줄어드는 디파이 프로젝트는 수명이 다한것과 다름없기 때문에 프로젝트의 지속가능성 여부를 참고하기에 좋다.
• Etherscan
• Defi lama
• Defi pulse
• [Fantom] Farm Scan
• Team Finance

• 지갑에 토큰을 추가하는 기능
• Swap화면에 함께 있는 경우가 많다.
• 프로덕트의 네이티브토큰을 추가하는 버튼은 사이트 상단이나 하단의 계정주소 옆에 위치하는 경우도 있다.

• 현재 평균 가스비
• 특정 메뉴에만 있는 경우도 있지만 이용할 수 있는 메뉴가 많을수록 사이트 상단 혹은 하단의 네트워크, 계정주소 옆에 위치하는것이 가장 좋은것 같다.

• 블록 넘버 표시
클릭시 블록 익스플로러와 연결되도록 한다. 역시 사이트 상단 또는 하단에 위치하는 것이 좋다고 생각한다.

문서

• 프로토콜에 대한 설명을 제공한다.
DeFi 프로덕트 이용전 프로토콜을 정확히 이해해야하므로 사용자가 학습할 수 있는 자료를 제공해야한다.
• 각 기능과 구성요소들이 프로토콜 내에서 어떻게 상호작용 하는지 이해할 수 있도록 도표를 함께 제공한다.
• 영상을 통해 기능별 이용방법을 설명한다.
• Trader Joe의 비디오 가이드: https://docs.traderjoexyz.com/main/learning-centre/video-guides
• DeFi를 처음 이용하는 사람들이 반드시 알아야하는 개념을 프로덕트와 연관지어 설명한다.
• DeFi 학습 콘텐츠 제공
Trader Joe 학습 시리즈 Defit: https://docs.traderjoexyz.com/main/learning-centre/learning-series-defit